<!DOCTYPE html>
<html dir="ltr" lang="en">
    <head>
        <title>MyHome</title>
        <link rel="shortcut icon" href="#" />
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
        <style type="text/css">
            .fixed-header {
              padding-top: 3rem;
            }

            .card {
                max-width: 22rem;
            }
        </style>
    </head>
    <body class="fixed-header">
        <!--This is just login page source-->
        <nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark p-1" id="header-1">
            <a class="logo navbar-brand d-flex align-items-center p-0 ms-0" href="http://localhost:8080/home/">
                <img class="" src="http://localhost:8080/home/assets/logo">
                <span class="navbar-brand ms-1">Creative Solutions</span>
            </a>
            <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#header-1-items" aria-controls="header-1-items" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div id="header-1-items" class="collapse navbar-collapse">
                <ul class="navbar-nav mr-auto mb-2 mb-md-0">
                    <li class="nav-item">
                        <a href="" class="nav-link">Item1</a>
                    </li>
                    <li class="nav-item">
                        <a href="" class="nav-link">Item2</a>
                    </li>
                </ul>
            </div>
        </nav>
        <aside id="sidebar" class="sidebar position-sticky col-3 text-white bg-dark">
            <ul class="sidebar-nav">
                <li class="sidebar-item">
                    <a class="sidebar-link" href=#>
                        Home
                    </a>
                </li>
            </ul>
        </aside>
        <main class="container m-1 col-9 justify-content-center">
            <div class="card shadow-sm ms-auto me-auto" id="card-2">
                <h5 class="card-header" id="card-2-header">Login</h5>
                <div class="card-body collapse show" aria-labelledby="card-2-header" id="card-2-body">
                    <form method="post" action="http://localhost:8080/home/login/form-3" enctype="multipart/form-data" id="form-3" name="form-3">
                        <label class="form-label" for="username" >Username</label>
                        <input class="form-control" id="username" name="username" placeholder="Type user name" type="text" >
                        <label class="form-label" for="password" >Password</label>
                        <input class="form-control" id="password" name="password" placeholder="" type="password" >
                        <div class="form-text">You need to use numbers</div>
                        <br>
                        <input type="hidden" name="execute" value="true">
                    </form>
                    <button class="btn btn-success" type="submit" form="form-3" value="Submit">Submit</button>
                    <button class="btn btn-primary" type="reset" form="form-3" value="Reset">Reset</button>
                </div>
            </div>
        </main>
    </body>
</html>
